define(['jquery', 'artTemplate'], ($, template) => {
    $('<header>').load('/includes/header.html', () => {
        //将头部css引入
        $('head').append(['<link rel="stylesheet" href="/css/header.css">', 
        '<link rel="stylesheet" href="//at.alicdn.com/t/font_2697109_9kmyayxushl.css">'])


        //  header事件委派
         $('.nav-header').on('click', (e) => {
            switch (e.target) {
                //logo点击跳转到商城首页
                case $('.nav-header-logo')[0]:
                    window.location.href = 'http://localhost:8888'
                    break
                //tv图标和主站点击跳转到bilibili首页
                case $('.nav-header-tv-icon')[0]:
                case $('.nav-header-mainsite')[0]:
                    window.location.href = 'https://www.bilibili.com/'
                    break
            }
        })

        //搜索框提示
        $('.nav-header-search-bar-wrapper input').on('input', function (e) {
            //设置点击搜索按钮要跳转的链接
            if ($(e.target).val() !== '') {
                $('.nav-header-search-bar-wrapper a').attr('href', 'https://show.bilibili.com/platform/search.html?searchValue=' + $('.nav-header-search-bar-wrapper input').val())
            }
            //动态添加ul标签
            if ($('.nav-header-search-bar-wrapper ul').length === 0) {
                $('.nav-header-search-bar-wrapper').append('<ul></ul>')
            }
            if ($(e.target).val() === '') {
                $('.nav-header-search-bar-wrapper ul').empty()
            } else {
                $.ajax('/bilibili/api/ticket/search/sug?term=' + $(e.target).val() + '&platform=web', {
                    type: 'get',
                    success: function (data) {
                        // console.log(data)
                        const suggestion = data.data.result
                        if (suggestion !== undefined) {
                            const html = template('search-suggestion', { suggestion: suggestion })
                            $('.nav-header-search-bar-wrapper ul').html(html)
                            // console.log(html)
                        }
                        //为ul设置事件委派，实现点击li跳转页面
                        $('.nav-header-search-bar-wrapper ul').on('click', e => {
                            // console.log(suggestion)
                            for (let i = 0; i < suggestion.length; i++) {
                                if ($(e.target)[0] === $('.nav-header-search-bar-wrapper ul li').eq(i)[0]) {
                                    $('.nav-header-search-bar-wrapper input').val($(e.target).html())
                                    console.log(suggestion[i].ref)
                                    if (suggestion[i].ref === 0) {
                                        window.open('https://show.bilibili.com/platform/search.html?searchValue=' + $('.nav-header-search-bar-wrapper input').val())
                                    } else {
                                        window.open('https://show.bilibili.com/platform/detail.html?id=' + suggestion[i].ref)
                                    }
                                }
                            }

                        })

                    }
                })
            }

            //搜索框回车搜索
        }).on('keydown', e => {
            if (e.which === 13 && $('.nav-header-search-bar-wrapper input').val() !== '') {
                window.open('https://show.bilibili.com/platform/search.html?searchValue=' + $('.nav-header-search-bar-wrapper input').val())
            }
        })

        //搜索框失去焦点时移除提示框
        $('.nav-header-search-bar-wrapper input').on('blur', e => {
            setTimeout(() => {
                $('.nav-header-search-bar-wrapper ul').remove()
            }, 100)

        })

        //订单中心
        $('.order-and-icon-wrapper .order-center').mouseenter((e) => {
            console.log('df')
            $('.order-and-icon-wrapper').css('color', '#f25d8e')
        }).mouseleave(() => {
            $('.order-and-icon-wrapper').css('color', '#636c7b')
        }).click(() => {
            window.location.href="/html/orderlist.html"
        })

        //点击登录弹出模态窗口
        $('.nav-header-login, .nav-header-register').on('click', () => {
            $('.login-window').css('display', 'block')
            //登录二维码超时设置
            let qrtimer = setTimeout(() => {
                $('.scan-qrcode-refresh').css('display', 'block')
            }, 120000)
            $('.scan-qrcode-refresh .refresh').click(() => {
                $('.scan-qrcode-refresh').css('display', 'none')
                qrtimer = setTimeout(() => {
                    $('.scan-qrcode-refresh').css('display', 'block')
                }, 120000)
            })
        })
        //点击模态窗口的关闭按钮
        $('.login-window-close').on('click', () => {
            $('.login-window').css('display', 'none')
        })
        //鼠标移到二维码上显示tips,移出隐藏
        $('.scan-tips').on('mouseenter', (e) => {
            //二维码过期时不执行
            if ($('.scan-qrcode-refresh').css('display') === 'none') {
                $('.scan-qrcode').stop(true).animate({
                    opacity: 0
                }, 300, () => {
                    // $('.scan-qrcode').css('display', 'none')
                })
                $('.scan-tips').stop(true).animate({
                    opacity: 1
                }, 300)
            }
        })
        $('.scan-tips').on('mouseleave', () => {
            if ($('.scan-qrcode-refresh').css('display') === 'none') {
                // $('.scan-qrcode').css('display', 'flex')
                $('.scan-qrcode').stop(true).animate({
                    opacity: 1
                }, 300, () => {
                    // $('.scan-qrcode').css('display', 'flex')
                })
                $('.scan-tips').stop(true).animate({
                    opacity: 0
                }, 300)
            }

        })
        //鼠标移到客户端链接时显示客户端二维码
        $('.scan-bottom p a').mouseenter(() => {
            $('.scan-qrcode').css('display', 'none')
            $('.scan-title').css('visibility', 'hidden')
            $('.scan-client').css('display', 'block')
        })
        $('.scan-bottom p a').mouseleave(() => {
            $('.scan-qrcode').css('display', 'flex')
            $('.scan-title').css('visibility', 'visible')
            $('.scan-client').css('display', 'none')
        })

        //点击tab切换登录方式
        const pwdHtml = $('.login-password-wrapper-container').html()
        const pwdBtnHtml = $('.login-password-wrapper-btn').html()
        $('.login-tab').on('click', (e) => {
            if (e.target === $('.login-tab-message')[0]) {
                $(e.target).addClass('isActive')
                $('.login-tab-password').removeClass('isActive')
                const messageHtml = `
                    <div class="password-wrapper-account">
                        <label for="login-accounte">+86</label>
                        <input type="text" id="login-account" placeholder="请输入手机号">
                        <span class="line"></span>
                        <span class="message-getcode">获取验证码</span>
                    </div>
                    <div class="password-wrapper-password">
                        <label for="login-password">验证码</label>
                        <input type="password" id="login-password" placeholder="请输入验证码">
                    </div>`
                const messageBtnHtml = `
                    <div class="password-btn-login-message">登录/注册</div>
                    `
                $('.login-password-wrapper-container').html(messageHtml)
                $('.login-password-wrapper-btn').html(messageBtnHtml)
            }
            if(e.target === $('.login-tab-password')[0]){
                $(e.target).addClass('isActive')
                $('.login-tab-message').removeClass('isActive')
                $('.login-password-wrapper-container').html(pwdHtml)
                $('.login-password-wrapper-btn').html(pwdBtnHtml)
            }
        })
    }).prependTo('body')
    $('<footer>').load('/includes/footer.html', () =>{
        $('head').append('<link rel="stylesheet" href="/css/footer.css">')
    }).appendTo('body')
})